<template>
    <div>
        <elcontainer>
            <!-- 面包屑导航栏和按钮组 -->
            <el-header style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;padding:20px;">
                <div class="flexBox" >
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/home' }"
                        >首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/index' }">档案管理</el-breadcrumb-item>
                        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div>
                        <el-button size="mini">下载模板</el-button>
                        <el-button size="mini" type="primary">导入</el-button>
                    </div>
                </div>
            </el-header>
            <el-container class="flexBox1">
            <!-- 侧边栏导航菜单 -->
            <el-aside width="200px" style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;position:relative">
              <div>
                   <div style="margin-top:20px">
                        <img src="../assets/ju.png" style="width:60px;height:60px">
                        <div>姓名 : {{this.data.姓名}}</div>
                        <div>编号 : {{this.data.工号}}</div>
                   </div>
               <el-divider></el-divider>
               <el-menu default-active="1" @select="handleSelect">
                  <el-menu-item index="1">个人信息</el-menu-item>
                  <el-menu-item index="2">教育经历</el-menu-item>
                  <el-menu-item index="3">层级晋升</el-menu-item>
                  <el-menu-item index="4">职称晋升</el-menu-item>
                  <el-menu-item index="5">职务晋升</el-menu-item>
                  <el-menu-item index="6">工作经验</el-menu-item>
                  <el-menu-item index="7">论文发表</el-menu-item>
                  <el-menu-item index="8">科研项目</el-menu-item>
                  <el-menu-item index="9">兼任职务</el-menu-item>
                  <el-menu-item index="10">护理不良事件</el-menu-item>
               </el-menu>
              </div>
            </el-aside>
            <!-- 信息表单 -->
            <el-main style="box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 20px 0.5px;border-radius:6px;margin-left:10px;margin-top:20px">
             <div v-if="showInfo==1">
                 <el-form >
                  <div class="title">
                      <i class="el-icon-suitcase" style="margin-right:10px"></i>基本信息</div>
                  <el-divider></el-divider>
                  <el-form-item>
                      <img src="../assets/ju.png"  style="width:160px;height:160px">
                  </el-form-item>
                  <el-row :gutter="10">
                      <el-col :span="8">
                        <el-form-item :label="姓名" :prop="data.姓名">
                           <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="性别" :prop="data.性别">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="民族" :prop="data.民族">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                  </el-row>     
                         <el-row :gutter="10">
                      <el-col :span="8">
                        <el-form-item :label="证件类型" :prop="data.证件类型">
                           <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="证件号码" :prop="data.证件号码">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="出生日期" :prop="data.出生日期">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                  </el-row> 
                  <el-row :gutter="10">
                      <el-col :span="8">
                        <el-form-item :label="籍贯" :prop="data.籍贯">
                           <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="国籍" :prop="data.国籍">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="学历" :prop="data.学历">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                  </el-row> 
                  <el-row :gutter="10">
                      <el-col :span="8">
                        <el-form-item :label="学位" :prop="data.学位">
                           <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="最高学历获取时间" :prop="data.最高学历获取时间">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="毕业院校" :prop="data.毕业院校">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                  </el-row> 
                  <el-row :gutter="10">
                      <el-col :span="8">
                        <el-form-item :label="教育形式" :prop="data.教育形式">
                           <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="婚姻状况" :prop="data.婚姻状况">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="政治面貌" :prop="data.政治面貌">
                           <el-select :disabled="edit"></el-select>
                        </el-form-item>
                  </el-row>             
                  <div class="title">
                      <i class="el-icon-suitcase" style="margin-right:10px"></i>职业信息</div>
                  <el-divider></el-divider>
                     <el-row :gutter="10">
                      <el-col :span="6" v-for="item in prof">
                        <el-form-item :label="item.label" v-if="item.type=='1'">
                          <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="item.label" v-else-if="item.type=='3'">
                          <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="item.label" v-else-if="item.type=='4'">
                          <el-date-picker :disabled="edit"></el-date-picker>
                        </el-form-item>
                      </el-col>
                  </el-row>                 
                  <div class="title">
                      <i class="el-icon-suitcase" style="margin-right:10px"></i>联系信息</div>
                  <el-divider></el-divider>
                    <el-row :gutter="10">
                      <el-col :span="6" v-for="item in rela">
                        <el-form-item :label="item.label" v-if="item.type=='1'">
                          <el-input :disabled="edit"></el-input>
                        </el-form-item>
                        <el-form-item :label="item.label" v-else-if="item.type=='3'">
                          <el-select :disabled="edit"></el-select>
                        </el-form-item>
                        <el-form-item :label="item.label" v-else-if="item.type=='4'">
                          <el-date-picker :disabled="edit" ></el-date-picker>
                        </el-form-item>
                      </el-col>
                  </el-row>                 
                  <div class="title">
                      <i class="el-icon-suitcase" style="margin-right:10px"></i>个人简介</div>
                  <el-divider></el-divider>
                  <el-row :gutter="15">
                      <el-col :span="24">
                        <el-form-item>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="textarea2"
                            :disabled="edit">
                        </el-input>
                        </el-form-item>
                      </el-col>
                   </el-row> 
                  <div class="title">
                      <i class="el-icon-suitcase" style="margin-right:10px"></i>备注信息</div>
                      <el-divider></el-divider>
                      <el-row :gutter="15">
                      <el-col :span="24">
                        <el-form-item>
                         <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="textarea2"
                            :disabled="edit">
                        </el-input>
                        </el-form-item>
                      </el-col>
                   </el-row> 
               </el-form>
               <el-button type="primary">保存</el-button>
               <el-button >返回</el-button>
             </div>
             <div v-else>
               <dynamic></dynamic>
             </div>
            </el-main>
            </el-container>
        </elcontainer>
    </div>
</template>
<script>
import dynamic from '../components/dynamic.vue';
export default {
  components: { dynamic },
  name: "info",
  data() {
    return {
            /**
             * type:
             * 1:单选框
             * 2:多选框
             * 3:选择框
             * 4:datePicker
             */
            edit:this.$route.params.edit,
            data:this.$route.params.data,
            showInfo:1,

            prof:[
                {label:"当前职称晋升日期",type:4},
                {label:"当前职务晋升日期",type:4},
                {label:"当前层级晋升日期",type:4},
                {label:"专科护士证书获取时间",type:4},
                {label:"科室",type:3},									
                {label:"人员性质",type:3},
                {label:"人员类别",type:3},
                {label:"聘任职称",type:1},
                {label:"人员层级",type:3},
                {label:"岗位类别",type:3},
                {label:"管理职务",type:3},
                {label:"执业证书编号",type:1},
                {label:"执业证书有效期",type:4},
                {label:"从事专业",type:3},
                {label:"参加工作日期",type:4},
                {label:"来院日期",type:4},									
                {label:"是否离职",type:3},
                {label:"返聘时间",type:4},
                {label:"工龄",type:1},
                {label:"院龄",type:1},
                {label:"岗位性质",type:3},
            ],
            rela:[
                {label:"手机号码",type:1},
                {label:"办公电话",type:1},
                {label:"联系人单位",type:1},
                {label:"邮箱",type:1},
                {label:"邮编",type:1},		
                {label:"联系人地址",type:3},	

            ]
        }
    },
    methods:{
      handleSelect(index){
        console.log(index)
        this.showInfo=index;
      }
    },
    mounted(){
      console.log(this.data)
    }
}
</script>
<style scoped>
.el-aside{
    background-color: white;
    margin-top: 20px;
}
.flexBox1{
  display: flex;
  justify-content: space-between;
  align-items: top;
  flex-wrap: nowrap;
}
.title{
    color: #409EFF;
    font-size: 14px;
    font-weight: bold;
    margin: 24px 0;
}
.el-input{
    width: 340px;
}
.el-select{
    width: 340px;
}
.el-table__header{
  background-color: royalblue !important;
}
</style>